<template>
  <chart
    id="myChart"
    :noData="noData"
    :chartStyle="chartStyle ? chartStyle : 'height:100%'"
    :option="dataOption"
  />
</template>
<script>
import chart from "./newChart";
import echarts from "echarts";
import _ from "lodash";
/*
单个bar图表
value:[{
    name:'',
    value:'',
    barWidth:'24',//bar宽度
    barGrap:'21',//bar间距
    color:[],
}]
option:{ //echart 的 option
    legendArr:['',''] //如果有legend ,按照顺序传入 legend 名字
    exchange:false,///xy轴互换
    color:"",柱状图label的颜色
    barBorderRadius: [0,0,0,0]  柱状图的圆角
    startColor:'',
    endColor:'',
    showLabel,
    positionLabel: right ，
    showUnit:false, // 是否显示单位
    unit：'' // 单位
}
*/
const lineColor = [
  {
    startColor: "#48e5ff",
    endColor: "#088ceb"
  },
  {
    startColor: "#af4cfd",
    endColor: "#6937fd"
  },
  {
    startColor: "#da34fb",
    endColor: "#6937fd"
  }
];
export default {
  props: {
    value: {
      type: Array,
      default: () => {
        return [];
      }
    },
    option: {
      type: Object,
      default: () => {
        return {};
      }
    },
    chartStyle: {
      type: String, // 自定义图表宽高
      default: () => {
        return "";
      }
    }
  },
  components: {
    chart
  },
  data() {
    return {
      noData: false,
      dataOption: {}
    };
  },
  watch: {
    value(newValue, oldValue) {
      this.noData = false;
      if (this.value && this.value.length > 0) {
        this.noData = false;
        this.setOption(newValue);
      } else {
        this.$set(this, "noData", true);
        return;
      }
    }
  },
  methods: {
    setExchangeOption(res) {
      var barBorderRadius = this.option.barBorderRadius || [0, 0, 0, 0];
      var itemStartColor = this.option.startColor || lineColor[0].startColor;
      var itemEndColor = this.option.endColor || lineColor[0].endColor;
      var xData = [];
      var unit = this.option.unit ? this.option.unit : "";
      var data = {
        data: [],
        type: "bar",
        name: "",
        barWidth: this.option.barWidth || 13,
        label: {
          normal: {
            show: this.option.showLabel,
            offset: [0, 3],
            position: this.option.positionLabel || "right",
            fontSize: "12",
            color: this.option.labelColor || "#31cee6",
            fontFamily: "DIN Condensed Bold"
          }
        },
        itemStyle: {
          normal: {
            barBorderRadius: barBorderRadius,
            color:
              !this.option.hideLineColor &&
              new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: itemStartColor
                },
                {
                  offset: 1,
                  color: itemEndColor
                }
              ])
          }
        }
      };
      res.forEach(item => {
        var obj = {};
        const name = item.xData ? item.xData : item.name;
        obj.value = name;
        var dataItem = {
          value: item.value,
          itemStyle: {
            normal: {}
          }
        };
        if (item.barLinearColor) {
          dataItem.itemStyle.normal.color = new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: item.barLinearColor[0]
              },
              {
                offset: 1,
                color: item.barLinearColor[1]
              }
            ]
          );
        }
        data.data.push(dataItem);
        xData.push(obj);
      });
      var option = {
        xAxis: {
          type: "value",
          fontWeight: "bold",
          axisLabel: {
            rotate: 45,
            formatter: function(value, index) {
              return "{value|" + value + "}";
            }
          }
        },
        yAxis: {
          data: xData,
          type: "category",
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            margin: 2,
            formatter: value => this.$utils.formatterAxisLabel(value)
          }
        },
        tooltip: {
          axisPointer: {
            shadowStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(0,0,0,0)"
                },
                {
                  offset: 1,
                  color: "rgba(0,209,255,0.2)"
                }
              ])
            }
          },
          formatter: params => this.$utils.formatterLine(res, params, unit)
        },
        grid: {
          top: "10%",
          right: "10%",
          left: "20%",
          bottom: "10%"
        },
        series: [data]
      };
      var allOption = _.merge(option, this.option);
      this.$set(this, "dataOption", allOption);
    },
    setOption(res) {
      if (this.option.exchange) {
        this.setExchangeOption(res);
      } else {
        var itemStartColor = this.option.startColor || lineColor[0].startColor;
        var itemEndColor = this.option.endColor || lineColor[0].endColor;
        var barBorderRadius = this.option.barBorderRadius || [0, 0, 0, 0];
        var xData = [];
        var unit = "";
        const data = {
          type: "bar",
          name: "",
          barGap: "100%", // 两个bar之间的距离
          itemStyle: {
            normal: {
              barBorderRadius: barBorderRadius,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: itemStartColor
                },
                {
                  offset: 1,
                  color: itemEndColor
                }
              ])
            }
          },
          z: 10,
          data: [],
          barWidth: this.option.barWidth || 24
        };

        res.forEach((resItem, resId) => {
          const itemXData = resItem.name || resItem.xData;
          xData.push(itemXData);
          var obj = {
            label: {
              normal: {
                show: this.option.showLabel,
                position: "top",
                distance: 8, // 距离图形的距离
                textStyle: {
                  color: this.option.color || "#00d1ff",
                  fontWeight: "bold",
                  fontFamily: "DIN Condensed Bold",
                  fontSize: "12"
                }
              }
            }
          };
          if (Number(resItem.value) < 0) {
            obj.label.normal.position = "bottom";
          } else {
            obj.label.normal.position = "top";
          }
          obj.value = resItem.value;
          data.data.push(obj);
        });
        /* 计算barWidth*/
        var xLength = xData.length; // x轴数据
        var myChartW = document.getElementById("myChart").offsetWidth;
        var yAxisW = 0;
        var gridLeft = 0;
        var grid = this.option.grid;
        if (grid) {
          gridLeft = grid.left ? grid.left : 0.12;
          yAxisW = myChartW * gridLeft;
        } else {
          yAxisW = myChartW * 0.12;
        }
        myChartW = myChartW - yAxisW;
        var barWidth = Math.round(myChartW / xLength / 3); // 为什么除以三，，柱状图与间隙比为1：1, 柱状图 左右有两个间隙
        if (!this.option.barWidth) {
          if (barWidth < 5) {
            data.barWidth = 10;
          } else {
            data.barWidth = barWidth;
          }
        }
        /* 计算barWidth 结束*/
        var option = {
          dataZoom: [
            {
              show: false,
              bottom: 50,
              height: 6,
              xAxisIndex: [0],
              zoomLock: true,
              start: 0,
              right: 0,
              handleIcon:
                "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
              handleSize: "120%",
              borderColor: "#3F79F6",
              backgroundColor: "#31cee6",
              fillerColor: "#3F79F6",
              handleStyle: {
                color: "#3F79F6",
                opacity: 0
              },
              textStyle: {
                color: "#3F79F6"
              }
            }
          ],
          xAxis: {
            data: xData,
            axisLabel: {
              rotate: 45,
              formatter: function(value, index) {
                return "{value|" + value + "}";
              }
            }
          },
          yAxis: {
            name: unit,
            nameGap: 30,
            nameTextStyle: {
              color: "#31cee6"
            }
          },
          tooltip: {
            axisPointer: {
              shadowStyle: {
                color: {
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(0,0,0,0)" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(0,209,255,0.2)" // 100% 处的颜色
                    }
                  ]
                }
              }
            },
            formatter: params => this.$utils.formatterLine(res, params, unit)
          },
          grid: {
            bottom: "20%",
            right: "0",
            left: "12%"
          },
          series: [data]
        };
        if (!this.option.openDataZoom) {
          if (barWidth < 10) {
            option.dataZoom[0].show = true;
            option.dataZoom[0].end = (20 / xLength) * 100;
          } else {
            option.dataZoom[0].show = false;
            option.dataZoom[0].end = 100;
          }
        }
        var allOption = _.merge(option, this.option);
        this.$set(this, "dataOption", allOption);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
#myChart {
  width: 100%;
  height: 100%;
}
</style>
